功能
介紹各種 console. 的使用
Demo
// 把 console 包成一個物件
// 這樣在開發後只要 isDev : false，就可以不執行 console， 不用一個個註解掉或刪除
let console = {
isDev : true,
log(...args){
if(!this.isDev) return
window.console.log(...args)
},
warn(...args){
if(!this.isDev) return
window.console.warn(...args)
},
error(...args){
if(!this.isDev) return
window.console.error(...args)
},
info(...args){
if(!this.isDev) return
window.console.info(...args)
},
assert(...args){
if(!this.isDev) return
window.console.assert(...args)
},
dir(...args){
if(!this.isDev) return
window.console.dir(...args)
},
clear(...args){
if(!this.isDev) return
window.console.clear()
},
group(...args){
if(!this.isDev) return
window.console.group(...args)
},
groupEnd(...args){
if(!this.isDev) return
window.console.groupEnd(...args)
},
count(...args){
if(!this.isDev) return
window.console.count(...args)
},
time(...args){
if(!this.isDev) return
window.console.time(...args)
},
timeEnd(...args){
if(!this.isDev) return
window.console.timeEnd(...args)
},
table(...args){
if(!this.isDev) return
window.console.table(...args)
}
}
- console.log()
console.log('Hello World')
- console.log('%s',value)
// Interpolated
// %s : 字串 / %f : 浮點數 / %d : 數字
// 第二個參數為要被帶入的值
console.log('Hello,%s', 'World') // Hello,World
console.log('Hello,%f', 3.14) // 3.14
console.log('Hello,%d', 3.14) // 3
// 用 ES6 template literals 的寫法更方便閱讀
let str = 'World'
console.log(`Hello, ${str}`) // Hello,World
- console.log( %c , font-style)
// styled
// 將字串帶入 CSS 樣式
console.log('%c 住手！', 'font-size: 50px; color: red')
- console.warn()
// warning
// 顯示警告的樣式
console.warn('Warning')
- console.error()
// Error
// 顯示為錯誤圖示
console.error('Error')
- console.info()
// info
// 顯示為資訊圖示
console.info('info')
- console.assert()
// testing
// 用來測試如果第一個參數，若結果為 false， 則顯示第二個參數
console.assert( 1 === 2 , "no~")
// 以下的結果都會回傳第二個參數
console.assert(false,"訊息")
console.assert("","訊息")
console.assert(0,"訊息")
console.assert(NaN,"訊息")
console.assert(null,"訊息")
console.assert(undefined,"訊息")
console.clear()
清除console的所有訊息快捷鍵
- Mac =>
⌘(Command)+K - Windows =>
Ctrl+L
- Mac =>
- console.dir()
// Viewing DOM Elements
const p = document.querySelector('p')
console.log(p) // 返回 p 本身的內容
console.dir(p) // 印出 p 以及擁有的屬性
- console.group() & console.groupEnd()
// Grouping together
// 用 group 將資訊包成層級式
dogs.forEach(function(dog){
console.group(dog['name'])
console.log(`${dog['name']} is ${dog['age']} years old`)
console.groupEnd(dog['name'])
})
// 若要資料一開始先收合，可以把 console.group 換成 console.groupCollapsed
- console.count()
// counting
// 計算此 console 出現的次數
console.count('a') // a: 1
console.count('b') // b: 1
console.count('a') // a: 2
console.count('a') // a: 3
console.count('a') // a: 4
console.count('a') // a: 5
console.count('b') // b: 2
console.count('b') // b: 3
// 用 iterate 的方法求出 count
// const text = ['a', 'b', 'a', 'b', 'c', 'a', 'b']
// text.forEach(function(letter){
// console.count(letter)
// })
// 若要歸零 ： console.countReset
- console.time() & console.timeEnd()
// timing
// 計算某一段區域內的程式執行的時間，
console.time('fetch data')
fetch('https://api.github.com/users/webos')
.then(data => data.json())
.then(data =>{
console.timeEnd('fetch data')
console.log(data)
})
- console.table()
// table
console.table(dogs)
// 篩選只想顯示的欄位
console.table(dogs,['name'])
其他資源 （chrome dev tool）
參考資料：
